/* eslint-disable semi */
<template>
  <div class="hello">
    <input type="text" v-model="state.num1" />
    <span>+</span>
    <input type="text" v-model="state.num2" />
    <span>=</span>
    {{ state.result }}
    <button type="button" @click="clickEvent()">emit event</button>
  </div>
  {{ msg }}
</template>

<script>
import { reactive, computed, ref } from 'vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(props, ctx) {
    const state = reactive({
      num1: 0,
      num2: 0,
      result: computed(() => parseInt(state.num1) + parseInt(state.num2))
    })

    const clickEvent = () => {
      // this.$emit('',payload)
      // ctx.emit()
      console.log('click')
      ctx.emit('sendMsg', state.result)
    }
    // function add() {
    //   state.result = parseInt(state.num1) + parseInt(state.num2)
    // }

    return {
      state,
      clickEvent
      // add
    }
  }
}
</script>

<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
